<template>
	<view class="personal">
		<!-- 顶部栏 -->
		<!-- <nav-bar isBack  title="选择户型" ></nav-bar> -->
		<nav-bars fontColor="#000"  title="选择户型"></nav-bars>
		<!-- 内容-->
		 <view class="i_data">
			 <!-- tab栏 -->
			 <view class="i_dTabs">
                <view class="roomslist">
					<text v-for="(item,index) in room" :key="index" :class="{active:item.id == roomid}" @click="tabToggle(item.id)">{{item.name}}</text>
				</view>
			 </view>
		   <view class="i_dContain">
			<!-- 数据列表 -->
			<scroll-view class="i_dList" scroll-y @scrolltolower="nextPage">
				<view class="no-card" v-if="list.length==0">
				    <image src="https://manager.ryz1620.com/static/my/sm.png"></image>
				    <text>暂无户型~</text>
				</view>
              <view class="side-line" v-for="(item,index) in 2" :key="index">
                  <navigator class="card" :url="'/pages_view/pages/desiginview/deatil?house_id=' + items.house_id"  v-if="indexs%2==index" v-for="(items,indexs) in list " :key="index">
                      <image lazyLoad="true" mode="widthFix" :src="items.thumb_url"></image>
					  <view class="list-name">
						  <view class="tc1">{{items.house_type}}</view>
						  <view class="tc2">约{{items.sale_price}}万/套</view>
					  </view>
                  </navigator>
              </view>
		   	</scroll-view>
		   </view>	 
		 </view>
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_desginview from '@/service/desginview'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			list:[],
			keyword: '', 
			province: '',  
			city: '',  
			district: '',
			rooms:'',
			roomid:0,
			page:1,
			room:[
				{
					id:0,
					name:'全部'
				},
				{
					id:1,
					name:'1室'
				},
				{
					id:2,
					name:'2室'
				},
				{
					id:3,
					name:'3室'
				},
				{
					id:4,
					name:'4室'
				},
				{
					id:5,
					name:'5室'
				},
			],
			
		}
	},
	onLoad(options) {
		this.$utils.getUrl()
		this.province = options.province
		this.city=options.city  
		this.district=options.district
		this.keyword = options.keyword
		this.gethotlist()
	},
	methods: {
		// 切换tab栏
		tabToggle(id) {
			this.roomid = id
			if(id == 0){
				this.rooms = ''
				this.list = []
				this.gethotlist()
			}else{
				this.rooms = id
				this.list = []
				this.gethotlist()
			}
		},
		nextPage(){
			this.page++
			this.gethotlist()
		},
		// 获取户型
		gethotlist() {
			service_desginview.getsearhouselist({ 
				keyword: this.keyword, 
				province: this.province,  
				city: this.city,  
				district: this.district,
				rooms: this.rooms, 
				page:this.page
			})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.list
						for(let i = 0;i<data.length;i++){
							this.list.push(data[i])
						}
										
					}
				})
		},
	
	}
}
</script>

<style lang="scss" scoped>
page{
	background: #fff;
}
.side-line {
    width: 50%;
	float: left;
	overflow: hidden;
}
.card {
	font-size: 30rpx;
	margin: 20rpx 10rpx;
	border-radius: 10rpx;
	background-color: #fff;
}

.card>image {
	width: 100%;
	height: 200rpx;
	flex-shrink: 0;
	background-color: #f6f6f6;
	border-radius: 10rpx 10rpx 0 0;
	height: 345rpx;
	vertical-align: middle;
	max-width: 480rpx;
}
.personal {background: #fff;min-height:100vh;}
// 顶部作者栏=====
.personal .p_auth {height: 0;position: relative;z-index: 500;
	.p_aCan {width: 100%;overflow: hidden;display: flex;justify-content: space-between;align-items: center;opacity: 0;transition: opacity .3s;
		&.active {opacity: 1;}
	}
	.p_aFocus {width: 75rpx;height: 48rpx;line-height: 48rpx;text-align: center;color: #fff;font-size: 20rpx;margin: 0 36rpx 0 40rpx;border-radius: 28rpx;background: #333;float: right;
		&.active {color: #939393;background: #f6f7fb;}
	}
	.p_aHead {width: 68rpx;height: 68rpx;margin-right: 28rpx;border-radius: 50%;background: #f0f0f0;overflow: hidden;float: left;}
	.p_aName {height: 40rpx;line-height: 40rpx;overflow: hidden;flex: 1;}
}


// 背景墙=====
.personal  .p_wall {height: 316rpx;position: relative;
	.p_wPicture {width: 100vw;height: 500rpx;background: #f0f0f0;position: absolute;top: 0;left: 0;}
	.p_wShadow {width: 100vw;height: 500rpx;background: linear-gradient(180deg, rgba(18, 19, 23, .3) 0%, rgba(255, 255, 255, .3) 100%);position: absolute;top: 0;left: 0;}
}
// 内容=====
.personal  .i_data {border-radius: 20rpx 20rpx 0 0;background: #fff;position: relative;z-index: 101;overflow: hidden;display: flex;flex-flow: column;flex: 1;  padding: 0 10rpx;height: 100%;}
.i_tInput {height: 72rpx;border-radius: 10rpx;background: #f6f7fb;position: relative;overflow: hidden;width:100%;margin-top:22rpx;
	& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 24rpx 0 72rpx;}
}
.i_tiIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #ccc;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;left: 28rpx;}
.i_tSwiper {height: 200rpx;position: relative;}
		.i_tDots {width: 100%;position: absolute;bottom: 8rpx;left: 0;display: flex;justify-content: center;}
		.i_tDot {width: 24rpx;height: 36rpx;
			&.active .i_tIcon {background: #ffd425;}
			.i_tIcon {width: 12rpx;height: 12rpx;margin: 12rpx auto 0;border-radius: 50%;background: rgba(255, 255, 255, .5);}
		}
		.i_tCont {height: 100%;border-radius: 10rpx;background: #f6f7fb;position: relative;overflow: hidden;}
		.i_tBtn {width: 102rpx;height: 102rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.i_tbImg {width: 42rpx;height: 42rpx;margin: 20rpx auto 0;}
		.i_tbTxt {width: 100%;height: 34rpx;line-height: 34rpx;text-align: center;color: #fff;font-size: 24rpx;position: absolute;top: 58rpx;left: 0;}
// tab栏==
.personal  .i_data .i_dTabs {height: 75rpx;display: flex;justify-content: space-between;
	.i_dtTab {height: 114rpx;color: #939393;font-size:24rpx;overflow: hidden;width:150rpx;
		.i_dtContain {width: 100%;height: 100%;padding-left: 8rpx;padding-right: 8rpx;overflow: hidden;display: flex;justify-content: center;}
		&:nth-child(1) .i_dtContain {padding-left: 36rpx;justify-content: flex-start;}
		&:nth-last-child(1) .i_dtContain {padding-right: 36rpx;justify-content: flex-end;}
		.i_dtCan {height: 114rpx;line-height: 114rpx;text-align: center;padding-right: 20rpx;position: relative;
			&.active {color: #a98f68;}
		}
		.i_dtIcon1, .i_dtIcon2, .i_dtIcon3 {width: 0;height: 0;border: 6rpx solid transparent;border-top-color: #6c6c6c;position: absolute;top: 50%;right: 0;}
		.i_dtIcon1 {top: 54rpx;transition: transform .3s;transform: rotate(0);transform-origin: 50% 25%;}
		.i_dtIcon2 {border-color: transparent;border-bottom-color: #ccc;top: 42rpx;
			&.active {border-bottom-color: #6c6c6c;}
		}
		.i_dtIcon3 {border-top-color: #ccc;top: 62rpx;
			&.active {border-top-color: #6c6c6c;}
		}
		.i_dtIcon4 {height: 24rpx;line-height: 24rpx;color: #fff;font-size: 20rpx;padding: 0 6rpx;margin: -12rpx 0 0 -12rpx;border-radius: 12rpx;background: #a98f68;position: absolute;top: 50%;left: 100%;}
		// tab选中效果
		&.active {color: #a98f68;
			.i_dtIcon1 {border-top-color: #a98f68;transform: rotate(180deg);transform-origin: 50% 25%;}
		}
	}
}
.i_dItem{
	margin:20rpx 0;
}
.s_tops{
	position: relative;
	padding-left: 220rpx;
	.ts_left{
		position:absolute;
		width:200rpx;
		height:200rpx;
		left:0;
		top:0;
		border-radius:10rpx;
		border:1px #CCCCCC solid;
		overflow: hidden;
	}
	.ts_right{
		overflow: hidden;
		image{
			height: 420rpx;
		}
	}
}
.s_tit{
	line-height:80rpx;
	margin-top:20rpx;
	font-weight:600;
	position: relative;
	text{
	  position:absolute;
	  background:#F6F7FB;
	  height:60rpx;
	  line-height: 60rpx;
	  width:140rpx;
	  text-align:center;
	  right:0;
	  top:10rpx;
	  border-radius: 8rpx;
	}
}
// 背景
.i_dsBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);;position: absolute;left: 0;top:110rpx;z-index: 9;}
.personal .i_data .i_dSelect {width: 100%;position: absolute;top: 110rpx;left: 0;z-index: 10;
	// 弹窗
	.i_dsBox {width: 100%;border-radius: 0 0 20rpx 20rpx;background: #fff;}
	.i_dsList {flex:1;overflow-y: auto;}
	.i_dsItem {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding-left: 36rpx;position: relative;
		&.active {color: #a98f68;}
		&.active .i_dsIcon {display: block;}
		.i_dsIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #a58f6d;font-size: 32rpx;position: absolute;top: 14rpx;right: 32rpx;display: none;}
	}
	.i_dsTags {padding: 14rpx 22rpx;overflow: hidden;
		.i_dsTag {padding: 14rpx 10rpx;float: left;
			.i_dsTag-box {height: 50rpx;line-height: 50rpx;font-size: 24rpx;padding: 0 18rpx 0 20rpx;background: #f6f7fb;border-radius: 26rpx;}
			&.active .i_dsTag-box {color: #a98f68;background: #f9f6f3;}
			&:active .i_dsTag-box {opacity: .88;}
		}
	}
	.i_dsBtns {height: 88rpx;margin-top: 26rpx;display: flex;
		.i_dsReset, .i_dsConfim {height: 88rpx;font-size: 24rpx;background: #f6f7fb;display: flex;justify-content: center;align-items: center;flex: 1;
			&:active {opacity: .88;}
		}
		.i_dsConfim {color: #fff;background: #a98f68;}
	}
}
.hottit{
	line-height: 80rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 10rpx;
}
.x_list{
	display: flex;
	height: 400rpx;
	background: #fff;
}
.i_dList{
	height: calc(100vh - 200rpx);
}
.clist{
	padding: 20rpx;
	line-height: 40rpx;
}
.clist .text2{
	float: right;
	color: #999;
}
.roomslist{
	text{
	display: inline-block;
	padding: 6rpx 20rpx;
	background: #F6F7FB;
	color: #939393;
	border-radius: 20rpx;
	margin-right: 20rpx;
	}
	text.active{
		color: #A58F6D;
		background: #F9F6F3;
	}
}
.list-name{
	padding: 10rpx 0;
	.tc1{
		color: #0A0605;
		font-size: 30rpx;
	}
	.tc2{
		margin-top: 10rpx;
		color: #C3AB7C;
		font-size: 26rpx;
	}
}
.no-card {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    border-radius: 20rpx 20rpx 0 0;
	    padding-top: 40rpx;
	}
	
	.no-title {
	    padding: 30rpx 0;
	}
	
	.no-card>text {
	    font-size: 24rpx;
	    color: #999;
	}
	
	.no-bnt {
	    padding: 10rpx 20rpx;
	    margin: 20rpx;
	    border: 2rpx solid #eee;
	    font-size: 26rpx;
	    background-color: #fff;
	}
	
	.no-card image {
	    height: 240rpx;
	    width: 240rpx;
	    padding: 40rpx;
	}
</style>